<template>
  <div class="app-container">
     <!-- 标题 -->
   	<header class="app-header">
    	<span class="title">{{$route.meta.title}}</span>
			<el-button type="primary" icon="el-icon-edit" @click.native="goToCreate">创建订单</el-button>
    </header> 
    <el-form :inline="true" :model="listQuery" class="query-form">
      <el-form-item>
        <el-input v-model="listQuery.id" :clearable = "true" placeholder="请输入订单编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button type="primary" icon="el-icon-search"  @click="onSubmit">查询</el-button>
          <el-button type="primary" icon="el-icon-refresh"  @click="onSubmit">刷新</el-button>
        </el-button-group>
      </el-form-item>
    </el-form> 
    <!-- 表单 -->
    
    <el-table v-loading="loading" :data="list" border >
      <el-table-column align="center"  label="订单Id" prop="id"  width="200" show-overflow-tooltip></el-table-column>
  		<el-table-column align="center" label="用户信息Id" prop="likeNum" width="150">
        <template slot-scope="scope">
          {{ scope.row.userId }}
        </template> 
      </el-table-column>
      <el-table-column align="center" label="商品信息" prop="likeNum">
        <template slot-scope="scope">
          {{ scope.row.orderGoods.length }}
        </template>       	
      </el-table-column>
      <el-table-column align="center" label="总价" prop="likeNum">
        <template slot-scope="scope">
          {{ scope.row.price | setMoney}}<br/>
          <del style=" color:#CCC;">{{ scope.row.marketPrice | setMoney}}</del>
        </template>       	
      </el-table-column>
      <el-table-column align="center" label="状态" prop="status"  width="120" >
        <template slot-scope="scope">
          <span>{{scope.row.status}}</span>
        </template>
      </el-table-column>
			<el-table-column align="center" label="创建时间" prop="created"  show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.created | parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>        
      </el-table-column>
      <el-table-column align="center"  label="操作">
      	<el-button-group slot-scope="scope">
   				<el-button type="primary" size="mini" @click.native.prevent="changeOrder(scope.row,scope.$index)">查看</el-button> 
          <el-button type="danger" size="mini"  @click.native.prevent="handleDel(scope.$index, scope.row)">删除</el-button> 
        </el-button-group>
      </el-table-column>  
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList"/>


    <el-dialog title="订单查看" :visible.sync="formVisible" :before-close="hideForm"  :close-on-click-modal="false" width="65%" top="5vh">
 			<div class="slider-main">
        <el-slider class="slider" v-model="value" :show-tooltip="false" :marks="marks"></el-slider>	
        <div class="slider-info">
          <p><b>订单编号：</b>hil8VBZhf</p>
          <p><b>用户信息：</b>tourists</p>
          <b>商品信息：</b>
          <p>
           	1.Apple iPhone 13 (A2634) 256GB 蓝色 支持移动联通电信5G 双卡双待手机<br/>
          	2.Apple iPhone 13 (A2634) 256GB 蓝色 支持移动联通电信5G 双卡双待手机<br/>
          </p>
          <b>物流信息：</b>
          <p>
           	1.包裹正在等待揽收<br/>
          	2.快件离开广州到达北京<br/>
            3.快件已达北京<br/>
            4.快件离开北京已发往北京环铁<br/>
          </p>          
        </div>
      </div>			
		</el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import request from '@/utils/request'
import config from '@/api/bgapi'
import { parseTime } from '@/utils'
export default {
  components: { Pagination},
  data() {
    return {
      loading: false,
      list:[],
      total: 0,
      listQuery: {
        id: '',
        page: this.$route.query.page?Number(this.$route.query.page):1,
        pageSize: 20
      },
			formVisible:false,
			value:0,
			marks:{
				0:'买家取消',
				12:'商家取消',
				24:'系统取消',
				36:'待付款',
				48:'已付款',
				60:'已发货',
				74:'买家签收',
				88:'买家退回',
				100:'退货'
			}
    }
  },
  mounted(){
    this.getList();
  },
  methods: {
    onSubmit() {
      this.getList()
    },
    async getList() {
      this.loading = true;
      var res = await request.get(config.order,{ params:this.listQuery } );
      this.loading = false;
      this.list = res.data || [];
      this.total = res.totalNum || 0;
    },




    handleDel(index, row){
      if (row.id) {
        this.$confirm("确认删除该记录吗?", "提示", {
            type: "warning",
        })
        .then(async () => {
            var res = await request.delete(config.content+'/'+row.id);
            if(res.code == '20000'){
              this.$message.success("删除成功");  
              this.getList();	
            }
        })
        .catch(() => {
            this.$message.info("取消删除");
        });
      }
    },
		goToCreate(){
			this.$router.push({path:'/trading/order/create'});
		},
    async changeOrder(row,index){
			this.formVisible = true;
    },
		hideForm(){
      // 更改值
      this.formVisible = !this.formVisible;
      this.resetForm();
      return true;			
		},
  },
  filters: {
		setMoney(money){
			if(money){
				money = money.toFixed(2)
			}else{
				money = 0;
				money = money.toFixed(2)
			}
			return money;				
		},		
		parseCate(cateIds,cateArr){
			var arr = cateIds;
			var data = cateArr;
			function getCity(arr, data, city = []) {
				if (typeof data === "object") {
						for (let i = 0; arr[i] !== undefined; i++) {
								for (let j = 0; data[j] !== undefined; j++) {
										if (arr[i] === data[j].id) {
												city.push(data[j].cateName);
										}
								}
						};
						for (let i = 0; data[i] !== undefined; i++) {
								getCity(arr, data[i].children, city);
						};
				}
				return city;
			}

			var str = getCity(arr,data).join('/')
			
			return str;
		}
  },  
}
</script>
<style scoped>
.video-box{ width: 50%;;}
.video-dialog >>> .el-dialog{width: 50%;  background:#F1F3F4; border-radius: 5px;}
.video-dialog >>> .el-dialog__header{ display: none;}
.video-dialog >>> .el-dialog__body{ width: 100%; height: 100%; padding: 0;}
.video-box{width: 100%; height: 100%; z-index: 88; border-radius: 5px; overflow: hidden; vertical-align: middle; outline: none; background:rgba(0, 0, 0, 0);}
.video-close{ font-size: 30px; z-index: 99;  position: absolute; top:-15px; right:-15px; cursor: pointer; background:#fff; border-radius: 30px;}

.img-view >>> .el-icon-circle-close {color: #5F6266; background: #fff; border-radius: 50%;}
.slider{ margin:0 60px 40px;}
.slider-main{ padding:0 20px;}
.slider-info{ padding: 0 20px; line-height:2;}
.slider >>> .el-slider__marks-text{ white-space:nowrap;}
</style>